<template>
  <div class="navHeader">
    <div class="sysName">
      供应链管理 课程辅助系统
    </div>
    <div class="content">
      <div :class="['item', whickIsCheck === 0 ? 'ischecked' : '']" @click="handleCheck(0)">
        课程学习
      </div>
      <div :class="['item', whickIsCheck === 1 ? 'ischecked' : '']" @click="handleCheck(1)">
        作业管理
      </div>
    </div>
    <div class="username">
      <div class="notice"></div>
      <div class="touxiang">
        <a-avatar :size="38" style="backgroundColor:#999;color: #001529;">{{ nameShow }}</a-avatar>
      </div>
      <div class="text">
        <a-dropdown :trigger="['click']" placement="bottomCenter">
          <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
            {{ usernameShow }} <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item key="0">
              <a href="javascript:;" @click="confirmShow = true">修改密码</a>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="1">
              <a href="javascript:;" @click="infoShow = true">修改个人信息</a>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="2">
              <a href="javascript:;" @click="$router.push('/manage')">切换管理员端</a>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="3">
              <a href="javascript:;" @click="$router.push('/')">退出登入</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </div>
    <a-modal
      :closable="false"
      title="修改密码"
      centered
      v-model="confirmShow"
      @ok="handleOk"
      class="captcha-modal"
      width="30%"
      cancelText="取消"
      okText="确认"
      :cancelButtonProps="{ props: { type: 'link' } }"
      okType="link"
    >
      <a-form ref="form">
        <a-form-item>
          <h3>用户名：</h3>
          <a-input autosize="true" size="large" disabled="true" v-model="usernameShow"> </a-input>
          <h3>密码：</h3>
          <a-input-password type="password" autosize="true" size="large" placeholder="请输入密码" v-model="password">
          </a-input-password>
          <h3>再次输入密码：</h3>
          <a-input-password
            type="password"
            autosize="true"
            size="large"
            placeholder="请再次输入密码"
            v-model="passwordA"
          >
          </a-input-password>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      :closable="false"
      title="修改个人信息"
      centered
      v-model="infoShow"
      @ok="handleOkInfo"
      class="captcha-modal"
      width="30%"
      cancelText="取消"
      okText="确认"
      :cancelButtonProps="{ props: { type: 'link' } }"
      okType="link"
    >
      <a-form ref="form">
        <a-form-item>
          <h3>用户名：</h3>
          <a-input autosize="true" size="large" disabled="true" v-model="usernameShow"> </a-input>
          <h3>昵称(选填)：</h3>
          <a-input autosize="true" size="large" placeholder="请输入密码" v-model="name"> </a-input>
          <h3>邮箱(选填)</h3>
          <a-input type="email" autosize="true" size="large" placeholder="请再次输入密码" v-model="email"> </a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: 'navHeader',
  props: {},
  components: {},
  mounted() {
    this.axios.defaults.headers.common['Authorization'] = window.sessionStorage.getItem('token');
  },
  data() {
    return {
      confirmShow: false,
      infoShow: false,
      username: '',
      password: '',
      passwordA: '',
      email: '',
      name: '',
      whickIsCheck: 0,
    };
  },
  computed: {
    usernameShow() {
      return this.$store.state.username;
    },
    nameShow() {
      let a = this.$store.state.name;
      let b = a.substr(a.length - 1, 1);
      return b;
    },
  },
  methods: {
    handleOk() {
      this.axios
        .post('/user/modify_pwd/', {
          username: this.usernameShow,
          password: this.password,
          re_password: this.passwordA,
        })
        .then(() => {
          this.$message.success('修改成功');
        });
      this.confirmShow = false;
      this.password = '';
      this.passwordA = '';
    },
    handleOkInfo() {
      this.axios
        .post('/user/modify_info/', {
          username: this.usernameShow,
          name: this.name,
          email: this.email,
        })
        .then((res) => {
          this.$message.success('修改成功');
          this.infoShow = false;
          console.log(res);
        });
    },
    handleCheck(check) {
      this.$store.dispatch('saveWhichModule', check);
      this.whickIsCheck = check;
      if (check === 0) {
        if (this.$route.path === '/study') return;
        this.$router.push('/study');
      } else if (check === 1) {
        this.$router.push('/study/homework');
      }
    },
  },
};
</script>

<style lang="scss">
.navHeader {
  position: relative;
  display: flex;
  width: 100%;
  height: 65px;
  background-color: #001529;
  .sysName {
    display: flex;
    width: 300px;
    height: 65px;
    color: #fff;
    font-size: 22px;
    line-height: 65px;
    margin-left: 20px;
  }
  .content {
    margin-left: 40px;
    display: flex;
    width: 416px;
    height: 65px;
    .item {
      width: 104px;
      height: 65px;
      color: #fff;
      line-height: 65px;
      font-size: 14px;
      text-align: center;
      &.ischecked {
        background-color: rgba(25, 144, 254, 100);
      }
      cursor: pointer;
    }
  }
  .username {
    display: flex;
    width: 150px;
    height: 65px;
    color: #fff;
    position: absolute;
    top: 0;
    right: 58px;
    align-items: center;
    .notice {
      width: 20px;
      height: 20px;
      @include bgImg(20px, 20px, '/imgs/notice.png');
      margin-right: 15px;
    }
    .touxiang {
      margin-right: 15px;
    }
  }
}
</style>
